Front-end 學習筆記(2/3)

第 12 屆 iThome 鐵人賽

DAY 15

自我挑戰組

艾利森踏上工程師之路的心路歷程系列第 15 篇

12th鐵人賽

Alison

2020-09-21 18:48:02

626 瀏覽

分享至

What is JQuery
一種JavaScript函式庫
容易學習，尤其對HTML/DOM/CSS熟悉的人

JQuery缺點
檔案大小
Native API vs. Wrapped API
瀏覽器提供的API一定比JQuery快

簡單秀一下JQuery大概長怎樣，先設定網頁樣子

<body>
    <button>click me</button>
    <button>click me</button>
    <button>click me</button>
</body>

然後newbutton是使用JQuery在script產生

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
    var newbutton = $("<button>")
    .css("border-style", "dotted")
    .css("background-color", "blue")
    .css("color", "#ffffff")
    .css("font-size", 24)
    .text("new button")
    .click(function () {
        alert("you clicked this button");
    });
    $("body").append(newbutton);
});
</script>

並且加上事件觸發提醒